<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像操作</title>
    <script src="../dep/jquery.min.js"></script>
    <style>
        body,html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-size: 12px;
        }

        section {
            padding: 0 15px;
            line-height: 30px;
        }

        .left,.right {
            position: absolute;
            width: 50%;
            top: 100px;
            bottom: 0;
            overflow: auto;
        }

        .right {
            right: 0;
        }

    </style>
</head>
<body>
    <div>
        <form id="img-form">
            <section>

                <input id="upload-file" type="file">
                <input type="button" id="pic-reset" value="还原图像">

                <label><input id="show-binarized" type="checkbox" value="0"> 显示二值图像</label>
            </section>

            <section>
                预处理：
                反转：<input data-action="reverse" type="checkbox">
                模糊：<input data-action="blur" type="range" min="0" max="20" step="1" value="0">
                高斯平滑：<input data-action="gaussBlur" type="range" min="0" max="20" step="1" value="0">
                锐化：<input data-action="sharp" type="range" min="0" max="10" step="1" value="0">
                亮度：<input id="brightness-bright" data-action="brightness" type="range" min="-50" max="50" step="1" value="0">
                对比度：<input id="brightness-contrast" data-action="brightness" type="range" min="-50" max="50" step="1" value="0">

            </section>

            <section id="pan-binarize" style="display: none">
                二值化图像：

                灰度阈值：<input id="threshold-gray" type="range" min="0" max="255" value="200">
                二值算子：
                <select id="threshold-fn" data-action="threshold">
                    <option value="">二值算子</option>
                    <option value="mean">基于灰度平均值的阈值</option>
                    <option value="minimum">基于谷底最小值的阈值</option>
                    <option value="intermodes">基于双峰平均值的阈值</option>
                    <option value="ostu">大津法</option>
                    <option value="isoData">ISODATA法</option>
                </select>

                开运算：<input data-action="open" type="range" min="0" max="20" step="1" value="0">
                闭运算：<input data-action="close" type="range" min="0" max="20" step="1" value="0">
                膨胀：<input data-action="dilate" type="range" min="0" max="20" step="1" value="0">
                腐蚀：<input data-action="erode" type="range" min="0" max="20" step="1" value="0">

            </section>
        </form>
    </div>
    <div class="left"><canvas id="canvas-src" width="800" height="800"></canvas></div>
    <div class="right"><canvas id="canvas" width="800" height="800"></canvas></div>

</body>
</html>
